import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Input, Select, InputNumber } from 'antd';
import { connect } from 'dva';

const FormItem = Form.Item;
const { Option } = Select;

@connect(({ supplier, loading }) => ({
  supplier,
  loading: loading.models.supplier,
}))
class BasicForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  // 搜索客户:主数据接口
  searchCust = value => {
    const { dispatch, form } = this.props;
    setTimeout(() => {
      dispatch({
        type: 'supplier/dataRecord',
        payload: { name: value },
      }).then(res => {
        if (res.success && res.data) {
          form.setFieldsValue({ stId: res.data.stId });
          const getFieldsList = form.getFieldsValue();
          Object.keys(res.data).forEach(key => {
            if (res.data[key]) {
              if (key === 'corpNature' || key === 'industryCode' || key === 'idType') {
                res.data[key] = `${res.data[key]}`;
              }
            }
          });

          Object.keys(getFieldsList).forEach(key => {
            if (res.data[key]) {
              if (key === 'corpNature' || key === 'industryCode' || key === 'idType') {
                form.setFieldsValue({ [key]: { key: res.data[key] } });
              } else {
                form.setFieldsValue({ [key]: res.data[key] });
              }
            }
          });
        }
      });
    }, 300);
  };

  // 文件上传
  // changeUpload = (info, listContFile) => {
  //   const { file, fileList } = info
  //   const newData = listContFile.map(item => ({ ...item }));
  //   if (file.status === 'done' && file.response.success) {
  //     const fileId = file.response.data.split('|')[0]
  //     const fileName = file.response.data.split('|')[1]
  //     fileList.map((file) => {
  //       file.url = `${downloadUrl}?fileId=${fileId}&fileName=${fileName}`
  //       file.linkProps = { 'download': `${fileName}` }
  //     });
  //     newData.push({
  //       uid: file.uid,
  //       custAffixId: fileId,
  //       affixName: fileName
  //     });
  //     this.props.getFileInfo(newData)
  //     message.success('文件上传成功！')
  //   }
  //   if (file.status == 'error') {
  //     message.error('上传失败！');
  //   }
  // }

  // 移除文件
  // removeFile = (file, listContFile) => {
  //   const newData = listContFile.filter(item => item.uid !== file.uid);
  //   this.props.getFileInfo(newData)
  // }

  render() {
    const {
      form: { getFieldDecorator },
      invoiceTypeList,
    } = this.props;
    // 表单布局
    const xl = { span: 8 };
    const lg = { span: 8 };
    const md = { span: 8 };
    const sm = 24;
    const colProps = { xl, lg, md, sm };
    // 下拉选项
    // 发票类型
    const invoiceTypeOL = invoiceTypeList.map(options => (
      <Option key={options.itemCode}>{options.itemName}</Option>
    ));
    // 文件上传
    // const uploadProps = {
    //   action: uploadUrl,
    //   onChange: (info) => this.changeUpload(info, affixList),
    //   onRemove: (file) => this.removeFile(file, affixList)
    // }
    return (
      <Form layout="vertical">
        <Row gutter={64}>
          <Col {...colProps}>
            <FormItem label="代收代付票据类型">
              {getFieldDecorator('agtsrvInvType', {
                rules: [{ required: true, message: '请输入' }],
              })(
                <Select placeholder="请选择" labelInValue showSearch optionFilterProp="children">
                  {invoiceTypeOL}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col {...colProps}>
            <FormItem label="代收代付税率">
              {getFieldDecorator('agtsrvTaxRate', {
                rules: [{ required: true, message: '请输入' }],
                initialValue: 0,
              })(
                <InputNumber
                  min={0}
                  max={100}
                  formatter={value => `${value}%`}
                  parser={value => value.replace('%', '')}
                  style={{ width: '100%' }}
                />
              )}
            </FormItem>
          </Col>
          <Col {...colProps}>
            <FormItem label="服务费票据类型">
              {getFieldDecorator('serInvType', {
                rules: [{ required: false, message: '请选择' }],
              })(
                <Select
                  placeholder="请选择"
                  allowClear
                  labelInValue
                  showSearch
                  optionFilterProp="children"
                >
                  {invoiceTypeOL}
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={64}>
          <Col {...colProps}>
            <FormItem label="服务费税率">
              {getFieldDecorator('serTaxRate', {
                rules: [{ required: false, message: '请输入' }],
                initialValue: 0,
              })(
                <InputNumber
                  min={0}
                  max={100}
                  formatter={value => `${value}%`}
                  parser={value => value.replace('%', '')}
                  style={{ width: '100%' }}
                />
              )}
            </FormItem>
          </Col>
          <Col {...colProps}>
            <FormItem label="备注">
              {getFieldDecorator('remark', {
                rules: [{ required: false, message: '请输入' }],
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
        </Row>
      </Form>
    );
  }
}
const BasicFormList = Form.create()(BasicForm);
export default BasicFormList;
